import { graphic } from 'echarts'
import type { ChartPublicProps, DesignStore } from '@/types'

export { graphic }

/** 图表颜色 */
export const color: string[] = [
  '#0090FF',
  '#36CE9E',
  '#FFC005',
  '#FF515A',
  '#8B5CFF',
  // '#00CA69',
  // '#22c3aa',
  // '#ff999a',
  // '#49afff',
  // '#ffa77f',
  // '#f6b655',
  // '#74caae',
  '#97b552',
  '#95706d',
  '#dc69aa',
  '#07a2a4',
  '#9a7fd1',
  '#588dd5',
  '#f5994e',
  '#c05050',
  '#59678c',
  '#c9ab00',
  '#7eb00a',
  '#6f5553',
  '#c14089',
]

/** 获取主题颜色 */
export function getThemeColor(theme: DesignStore['theme']) {
  const light = {
    text: '#000',
    bg: '#fff',
  }
  const dark = {
    text: '#fff',
    bg: '#141414',
  }
  return theme === 'light' ? light : dark
}

export function createLegend(position: ChartPublicProps['legendPosition'] | false, theme: DesignStore['theme']) {
  if (typeof position === 'boolean' && !position) {
    return {
      show: false,
    }
  }
  const themeColor = getThemeColor(theme)
  const textStyle = {
    color: themeColor.text,
  }
  switch (position) {
    case 'top':
      return {
        top: '0',
        textStyle,
      }
    case 'left':
      return {
        left: '0',
        textStyle,
      }
    case 'right':
      return {
        right: '0',
        textStyle,
      }
    case 'bottom':
      return {
        bottom: '0',
        textStyle,
      }
  }
}
/**
 * 渐变色
 * 依据color变量生成
 */
export function linearGradient(sort: 'asc' | 'desc' = 'desc', colorStops: { offset: number, alpha: number }[] = [
  {
    offset: 0,
    alpha: 0.5,
  },
  {
    offset: 1,
    alpha: 1,
  },
]) {
  const handlerColorStops = (c: string) =>
    colorStops.map(item => ({
      offset: item.offset,
      color: hex2Rgba(c, item.alpha),
    }))
  return color.map(
    (c: string) =>
      new graphic.LinearGradient(
        0,
        Number(sort === 'asc'),
        0,
        Number(sort === 'desc'),
        handlerColorStops(c),
        false,
      ),
  )
}

/** 默认布局 */
export const defaultGrid = {
  top: '18%',
  left: '2%',
  right: '4.5%',
  bottom: '3%',
  containLabel: true,
}
/** 默认文字 */
export const defaultTitle = {
  text: '',
  textStyle: {
    fontSize: 12,
    fontWeight: 400,
  },
  left: 0,
  top: '5%',
}
/** 默认配置 */
export const defaultOption = {
  grid: defaultGrid,
}

export function createAreaStyle(color: string, option: object = {}) {
  return {
    color: new graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [
        {
          offset: 0,
          color: hex2Rgba(color, 0.5),
        },
        {
          offset: 1,
          color: hex2Rgba(color, 0.1),
        },
      ],
      false,
    ),
    shadowColor: hex2Rgba(color, 0.1),
    shadowBlur: 10,
    ...option,
  }
}
